<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-row :gutter="20" style="margin-bottom: 30px">
      <a-col :span="20">
        <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="startTime"></j-date>
        <span class="query-group-split-cust"></span>
        <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="endTime"></j-date>
      </a-col>
      <a-col :span="4" align="right">
        <a-button @click="getChartData" type="primary"><a-icon type="search" />查询</a-button>
      </a-col>
    </a-row>

    <div>
      <h4 style="text-align:center;margin-bottom:5px;">{{chartTitle}}</h4>
      <Radarchart v-if="flag=='radar'" ref="realChart" :dataSource="dataChart"></Radarchart>
      <Piechart v-if="flag=='pie'" ref="realChart" :dataSource="dataChart"></Piechart>
      <Areachart v-if="flag=='area'" ref="realChart" :dataSource="dataChart" :params="params"></Areachart>
    </div>
  </j-modal>
</template>

<script>

    import Radarchart from '@/views/modules/component/chart/Radarchart'
    import Piechart from '@/views/modules/component/chart/Piechart'
    import Areachart from '@/views/modules/component/chart/Areachart'
    import {getAction} from '@/api/manage'

    export default {
        name: 'ToolboxChartModal',
        components: {
            Radarchart,
            Piechart,
            Areachart,
        },
        props:{
            mark:String,
            chartTitle:String,
            selectionRows:Array
        },
        data () {
            return {
                title:'',
                width:800,
                visible: false,
                disableSubmit: false,
                flag:this.mark,
                dataChart:[],
                startTime:'2021-05-01',
                endTime:'2021-12-01',
                selectUserNames:'',
                selectToolboxIds:'',
                charturl:{
                    "chart":"/useinfo/useInfo/toolboxchart",
                    "areachart":"/useinfo/useInfo/toolboxareachart"
                },
                params:{}
            }
        },
        methods: {
            batchFil(){
                let select = ''
                let selectNames = ''
                let selectLength = this.selectionRows.length
                for (let i = 0; i < selectLength; i++) {
                    select += (this.selectionRows[i].str2+',')
                    selectNames += (this.selectionRows[i].str1+'('+this.selectionRows[i].str2+'),')
                }
                this.selectToolboxIds=select.substring(0,select.length-1)
                this.selectUserNames=selectNames.substring(0,selectNames.length-1)
                // console.log(this.selectUserNames)
            },
            getChartData(){
                let url = this.charturl.chart;
                this.batchFil()
                let params = {
                    "startTime":this.startTime,
                    "endTime":this.endTime,
                    "selectToolboxIds":this.selectToolboxIds
                }
                if(this.flag=="area"){
                    url = this.charturl.areachart
                    this.params = {
                        "startTime":this.startTime,
                        "endTime":this.endTime,
                        "selectUserNames":this.selectUserNames
                    }
                }
                getAction(url,params).then(res=>{
                    this.dataChart = res.result
                })
            },
            show(){
                this.getChartData()
                this.visible=true
            },
            close () {
                this.visible = false;
            },
            handleOk () {
                this.visible = false;
            },
            handleCancel () {
                this.close()
            }
        }
    }
</script>